<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Upload - Rainbow</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../static/libs/vue/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/rainbow-nash@0.1.17/dist/rainbow-nash.css">
    <script src="https://unpkg.com/rainbow-nash@0.1.17/dist/rainbow-nash.umd.min.js"></script>
    <link rel="stylesheet" href="../static/libs/highlight/highlight@9.12.0.min.css">
    <link rel="stylesheet" href="../static/libs/highlight/vs.min.css">
    <script src="../static/libs/highlight/highlight@9.12.0.min.js"></script>
    <style>
      [v-cloak] {
        display: none;
      }
      .demo-header{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .code-font{
        font-family: Consolas,Menlo,Courier,monospace;
      }
      .demo-header h1{
        margin-right: auto;
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 42px;
      }
      .demo-header h1 span{
        font-size: 60px;
        transform: rotate(7deg);
      }
      pre code{
        font-family: Consolas,Menlo,Courier,monospace;
        line-height: 2;
      }
      pre textarea{
        display: none;
      }
      .hljs{
        background-color: #f7f7f7;
      }
      .hljs-name, .hljs-keyword{
        color: #6089ec;
        font-weight: normal;
      }
      
      .anchor{
        margin-top: 30px;
      }
      .anchor h2, .anchor h3{
        margin-bottom: 10px;
      }
      
      .margin-top-10{
        margin-top: 10px;
      }
      
      .api table{
        font-family: Consolas,Menlo,Courier,monospace;
      }
      .api table th{
        white-space: nowrap;
      }
      
      
    </style>
  </head>
  <body>
    <r-app id="app" v-cloak>
      <div slot="header" align-items="center" class="demo-header">
        <h1 style="color: #f4615c"> <span>R</span><i>ainbow.Doc</i></h1>
        <r-icon type="paper-airplane"></r-icon>
        <r-dropdown label="木已成鲨鱼" style="margin-left: 4px">
          <r-dropdown-item>个人信息</r-dropdown-item>
          <r-dropdown-item>登出</r-dropdown-item>
        </r-dropdown>
      </div>
      <r-menu slot="aside" mode="vertical" v-model="common.activeMenu" expand>
        <r-menu-item name="1" href="start.html">快速上手</r-menu-item>
        <r-sub-menu name="2">
          <template slot="title">Basic</template>
          <r-menu-item name="2-1" href="grid.html">
            <r-icon type="ios-grid-view-outline"></r-icon>Grid 栅格
          </r-menu-item>
          <r-menu-item name="2-2" href="app.html">
            <r-icon type="ios-browsers-outline"></r-icon>App 布局
          </r-menu-item>
          <r-menu-item name="2-3" href="button.html">
            <r-icon type="social-youtube-outline"></r-icon>Button 按钮
          </r-menu-item>
          <r-menu-item name="2-4" href="icon.html">
            <r-icon type="ios-heart-outline"></r-icon>Icon 图标
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="3">
          <template slot="title">Form</template>
          <r-menu-item name="3-1" href="input.html">
            <r-icon type="ios-compose-outline"></r-icon>Input 输入框
          </r-menu-item>
          <r-menu-item name="3-2" href="radio.html">
            <r-icon type="ios-circle-filled"></r-icon>Radio 单选框
          </r-menu-item>
          <r-menu-item name="3-3" href="checkbox.html">
            <r-icon type="android-checkbox-outline"></r-icon>Checkbox 多选框
          </r-menu-item>
          <r-menu-item name="3-4" href="table.html">
            <r-icon type="ios-grid-view"></r-icon>Table 表格
          </r-menu-item>
          <r-menu-item name="3-5" href="select.html">
            <r-icon type="ios-arrow-down"></r-icon>Select 选择器
          </r-menu-item>
          <r-menu-item name="3-6" href="datepicker.html">
            <r-icon type="ios-calendar-outline"></r-icon>DatePicker 日期选择器
          </r-menu-item>
          <r-menu-item name="3-7" href="timepicker.html">
            <r-icon type="ios-clock-outline"></r-icon>TimePicker 时间选择器
          </r-menu-item>
          <r-menu-item name="3-8" href="upload.html">
            <r-icon type="ios-cloud-upload-outline"></r-icon>Upload 上传
          </r-menu-item>
          <r-menu-item name="3-9" href="form.html">
            <r-icon type="ios-list-outline"></r-icon>Form 表单
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="4">
          <template slot="title">View</template>
          <r-menu-item name="4-1" href="card.html">
            <r-icon type="ios-browsers-outline"></r-icon>Card 卡片
          </r-menu-item>
          <r-menu-item name="4-2" href="message.html">
            <r-icon type="ios-information-outline"></r-icon>Message 全局提示
          </r-menu-item>
          <r-menu-item name="4-3" href="modal.html">
            <r-icon type="ios-chatbubble-outline"></r-icon>Modal 对话框
          </r-menu-item>
          <r-menu-item name="4-4" href="progress.html">
            <r-icon type="android-remove"></r-icon>Progress 进度条
          </r-menu-item>
          <r-menu-item name="4-5" href="timeline.html">
            <r-icon type="android-more-vertical"></r-icon>Timeline 时间轴
          </r-menu-item>
          <r-menu-item name="4-6" href="tag.html">
            <r-icon type="ios-pricetags-outline"></r-icon>Tag 标签
          </r-menu-item>
          <r-menu-item name="4-7" href="tooltip.html">
            <r-icon type="chatbox-working"></r-icon>Tooltip 文字提示
          </r-menu-item>
          <r-menu-item name="4-8" href="tree.html">
            <r-icon type="network"></r-icon>Tree 树形控件
          </r-menu-item>
          <r-menu-item name="4-9" href="breadcrumb.html">
            <r-icon type="aperture"></r-icon>Breadcrumb 面包屑
          </r-menu-item>
          <r-menu-item name="4-10" href="alert.html">
            <r-icon type="android-alert"></r-icon>Alert 警告
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="5">
          <template slot="title">Navigation</template>
          <r-menu-item name="5-1" href="menu.html">
            <r-icon type="navicon-round"></r-icon>Menu 导航菜单
          </r-menu-item>
          <r-menu-item name="5-2" href="tabs.html">
            <r-icon type="social-windows-outline"></r-icon>Tabs 标签页
          </r-menu-item>
          <r-menu-item name="5-3" href="dropdown.html">
            <r-icon type="arrow-down-b"></r-icon>Dropdown 下拉菜单
          </r-menu-item>
          <r-menu-item name="5-4" href="page.html">
            <r-icon type="ios-book-outline"></r-icon>Page 分页
          </r-menu-item>
        </r-sub-menu>
      </r-menu>
      <div slot="main">
        <h1>Upload 上传</h1>
        <div class="anchor">
          <h2 id="概述"></h2>
        </div>
        <div class="anchor">
          <h3>文件列表</h3>
        </div>
        <r-card>
          <r-tabs v-model="common.tab">
            <r-tab-pane name="1" label="示例">
              <r-upload v-model="images" action="//jsonplaceholder.typicode.com/posts/" :on-success="onSuccess" :on-error="onError" :on-remove="onRemove" :multiple="true" :on-preview="onPreview" :before-upload="beforeUpload" :limit="5">
                <r-button icon="ios-cloud-upload-outline">上传文件</r-button>
              </r-upload>
            </r-tab-pane>
            <r-tab-pane name="2" label="代码">
              <pre><code class="html"></code>
                <textarea><r-upload v-model="images" action="//jsonplaceholder.typicode.com/posts/" :on-success="onSuccess" 
:on-error="onError" :on-remove="onRemove" :multiple="true" :on-preview="onPreview" 
:before-upload="beforeUpload" :limit="5">
  <r-button icon="ios-cloud-upload-outline">上传文件</r-button>
  
<script>
exprot default {
  data () {
    return {
      images: [
        {
          name: '图片1', 
          url: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
        },
      ],
    }
  }，
  onSuccess (res, file) {
    this.images.push({
      name: file.name,
      url: res.id
    })
  },
  onError (e, res, file) {
    this.$message(file.name + '上传失败', 'error')
  },
  onRemove (file) {
    this.$message(file.name + '被删除', 'warning')
  },
  onPreview (file) {
    this.$alert(file.url)
  },
  beforeUpload (file, callback){
    if (file.name.indexOf('.html') !== -1){
      this.$message('不能上传.html')
      callback(false)
    }
    else {
      callback(true)
    }
  }
}
</script>

                </textarea></pre>
            </r-tab-pane>
          </r-tabs>
        </r-card>
        <div class="anchor">
          <h3>图片列表</h3>
        </div>
        <r-card>
          <r-tabs v-model="common.tab2">
            <r-tab-pane name="1" label="示例">
              <r-upload ref="upload2" v-model="images" action="//jsonplaceholder.typicode.com/posts/" :on-success="onSuccess" :on-error="onError" :on-remove="onRemove" :multiple="true" :on-preview="onPreview" list-type="image">
                <r-button icon="ios-cloud-upload-outline">上传文件</r-button>
              </r-upload>
            </r-tab-pane>
            <r-tab-pane name="2" label="代码">
              <pre><code class="html"></code>
                <textarea><r-upload ref="upload2" v-model="images" action="//jsonplaceholder.typicode.com/posts/" :on-success="onSuccess" 
:on-error="onError" :on-remove="onRemove" :multiple="true" 
:on-preview="onPreview" list-type="image">
  <r-button icon="ios-cloud-upload-outline">上传文件</r-button>

<script>
exprot default {
  data () {
    return {
      images: [
        {
          name: '图片1', 
          url: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
        },
      ],
    }
  }，
  onSuccess (res, file) {
    this.images.push({
      name: file.name,
      url: res.id
    })
  },
  onError (e, res, file) {
    this.$message(file.name + '上传失败', 'error')
  },
  onRemove (file) {
    this.$message(file.name + '被删除', 'warning')
  },
  onPreview (file) {
    this.$alert(file.url)
  },
  beforeUpload (file, callback){
    if (file.name.indexOf('.html') !== -1){
      this.$message('不能上传.html')
      callback(false)
    }
    else {
      callback(true)
    }
  }
}
</script>

                </textarea></pre>
            </r-tab-pane>
          </r-tabs>
        </r-card>
        <div class="anchor">
          <h2>Api</h2>
        </div>
        <div class="anchor">
          <h3>Datepicker props</h3>
        </div>
        <div class="r-table r-table-border api">
          <table>
            <thead>
              <tr>
                <th>
                  <div>属性</div>
                </th>
                <th>
                  <div>说明</div>
                </th>
                <th>
                  <div>类型</div>
                </th>
                <th>
                  <div>默认值</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div>value</div>
                </td>
                <td>
                  <div>已经上传的文件列表，可使用 v-model，其中每一项至少包含两个必要字段，name、url。 name 表示文件名称，url表示文件地址</div>
                </td>
                <td>
                  <div>[]</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>action</div>
                </td>
                <td>
                  <div>文件上传的 server 地址</div>
                </td>
                <td>
                  <div>String</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>headers</div>
                </td>
                <td>
                  <div>额外添加的headers参数</div>
                </td>
                <td>
                  <div>Object</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>data</div>
                </td>
                <td>
                  <div>额外添加的上传参数</div>
                </td>
                <td>
                  <div>Object</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>multiple</div>
                </td>
                <td>
                  <div>是否可以多选上传</div>
                </td>
                <td>
                  <div>Boolean</div>
                </td>
                <td>
                  <div>false</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>name</div>
                </td>
                <td>
                  <div>上传的文件名字段</div>
                </td>
                <td>
                  <div>String</div>
                </td>
                <td>
                  <div>file</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>with-credentials</div>
                </td>
                <td>
                  <div>支持发送 cookie 凭证信息</div>
                </td>
                <td>
                  <div>Boolean</div>
                </td>
                <td>
                  <div>false</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>accept</div>
                </td>
                <td>
                  <div>接受上传的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept" target="_blank">文件类型</a></div>
                </td>
                <td>
                  <div>String</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>before-upload</div>
                </td>
                <td>
                  <div>上传文件之前的钩子，参数为上传的文件和一个回调函数，如果回调函数的参数为 true 则继续上传，为 false 则中断上传</div>
                </td>
                <td>
                  <div>Function</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>on-progress</div>
                </td>
                <td>
                  <div>文件上传时的钩子，返回字段为event, file</div>
                </td>
                <td>
                  <div>Function</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>on-success</div>
                </td>
                <td>
                  <div>文件上传成功时的钩子，返回参数为response，file。注意，在回调里，要主动把 response的name,url 添加到 value 中，以实现双向绑定的值同步。之所以如此，是因为 response 的数据结构不固定，无法在组件内部处理。</div>
                </td>
                <td>
                  <div>Function</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>on-error</div>
                </td>
                <td>
                  <div>文件上传失败时的钩子，返回参数为event, response, file</div>
                </td>
                <td>
                  <div>Function</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>on-preview</div>
                </td>
                <td>
                  <div>点击已上传的文件链接时的钩子，返回字段为 file</div>
                </td>
                <td>
                  <div>Function</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>on-remove</div>
                </td>
                <td>
                  <div>文件列表移除文件时的钩子，返回字段为 file</div>
                </td>
                <td>
                  <div>Function</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>limit</div>
                </td>
                <td>
                  <div>文件上传的个数限制</div>
                </td>
                <td>
                  <div>Number</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>list-type</div>
                </td>
                <td>
                  <div>文件列表展示的类型，可选值file, image</div>
                </td>
                <td>
                  <div>String</div>
                </td>
                <td>
                  <div>file</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>removeable</div>
                </td>
                <td>
                  <div>是否显示删除按钮</div>
                </td>
                <td>
                  <div>Boolean</div>
                </td>
                <td>
                  <div>true</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </r-app>
    <script>
      new Vue({
        el: '#app',
        watch: {
          'common.componentValue' () {
            location.href = this.common.componentValue + '.html'
          }
        },
        data () {
          return {
            common: {
              componentValue: '',
              activeMenu: '3-8',
              tab: '',
              tab2: ''
            },
            images: [
              {
                name: '图片1', 
                url: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
              },
            ],
          }
        },
        methods: {
          onSuccess (res, file) {
            this.images.push({
              name: file.name,
              url: res.id
            })
          },
          onError (e, res, file) {
            this.$message(file.name + '上传失败', 'error')
          },
          onRemove (file) {
            this.$message(file.name + '被删除', 'warning')
          },
          onPreview (file) {
            this.$alert(file.url)
          },
          beforeUpload (file, callback){
            if (file.name.indexOf('.html') !== -1){
              this.$message('不能上传.html')
              callback(false)
            }
            else {
              callback(true)
            }
          }
        }
      })
    </script>
  </body>
</html>
<script>
  setTimeout(function (){
    var preNodes = document.getElementsByTagName('pre')
    for (var i=0, preNode, codeNode, textNode; i<preNodes.length; i++){
      preNode = preNodes[i]
      codeNode = preNode.querySelector('code')
      textNode = preNode.querySelector('textarea')
  
      codeNode.innerText = textNode.value.trim()
      hljs.highlightBlock(codeNode)
    }
  }, 100)
</script>